<!--
    Created by IntelliJ IDEA.
    UserManage: Dai
    Date: 2018/3/26
    Time: 11:14
    Remark: 系统监控页面
    To change this template use File | Settings | File Templates.
-->
<!DOCTYPE html>
<html layout:decorate="~{default/layout}" xmlns:layout="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>系统监控</title>
    <!--ztree相关-->
    <script th:line="javascript">
        var setting = {
            view: {
                showIcon: false,        // 是否显示节点的图标
                showLine: true,         // 显示节点之间的连线。
                expandSpeed: "slow",    // 节点展开、折叠时的动画速度
                selectedMulti: false    // 不允许同时选中多个节点。
            },
            data: {
                simpleData: {
                    enable: true,        // 使用简单数据模式
                    idKey: "id",        // 节点数据中保存唯一标识的属性名称
                    pIdKey: "pId",      // 节点数据中保存其父节点唯一标识的属性名称
                    rootPId: ""      // 用于修正根节点父节点数据 默认值：null
                }
            },
            callback: {
                onClick: function (event, treeId, treeNode) {
                    $("#iframe").attr("src", "/monitor/monitor_web?id=" + treeNode.id);
                }
            }
        };

        $(document).ready(function () {
            $("#hide_search_div").hide();
            /**
             * 初始化ztree相关
             */
            var zNodes = $("#ztreeNodes").val();
            zNodes = eval('(' + zNodes + ')');  //转为json数组对象
            var treeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);     //初始化ztree
            treeObj.expandAll(true);    // 设置默认展开

            // 如果已有id则显示id对应的iframe
            var id = $("#id").val();
            if (id){
                $("#iframe").attr("src", "/monitor/monitor_web?id=" + id);
            }
        });

        /**
         * 切换ztree是否显示
         */
        function change_menu() {
            // 1. 隐藏ztree
            $("#search_div").hide();
            $("#hide_search_div").show();
            // 2. 扩大iframe显示
            $("#iframe").attr("class", "col-sm-12");
        }

        function show_menu() {
            // 1. 隐藏ztree
            $("#search_div").show();
            $("#hide_search_div").hide();
            // 2. 扩大iframe显示
            $("#iframe").attr("class", "col-sm-10");
        }


        /**
         * 改变iframe的高度
         */
        window.onresize = function () {
            var ifm = document.getElementById("iframe");
            ifm.height = window.innerHeight - $("#navbar").height() - 40;
        };

    </script>
</head>
<body>
<div layout:fragment="content">
    <div class="main-content-inner">
        <div class="page-content container-fluid">
            <div class="col-sm-2" style="padding: 0;" id="search_div">
                <div class="input-group input-group-sm">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
                    <input type="text" class="form-control" placeholder="模糊搜索" aria-describedby="sizing-addon3"
                           onblur="change_ztree_data()">
                    <span class="input-group-addon">
                        <a href="javascript:;" class="glyphicon glyphicon-menu-left" onclick="change_menu()"></a>
                    </span>
                </div>
                <!-- ztree 菜单树 -->
                <div style="float: left; height: 100%; border: 0px solid black; width: 100%" id="tree_div">
                    <input type="hidden" id="ztreeNodes" th:value="${list}">
                    <ul id="treeDemo" class="ztree"></ul>
                </div>
            </div>
            <button class="" id="hide_search_div" style="float: left;">
                <a href="javascript:;" class="glyphicon glyphicon-menu-right" onclick="show_menu()"></a>
            </button>
            <input type="hidden" id="id" th:value="${id}">
            <!--<div class="input-group input-group-sm col-sm-6">-->
            <!--<span class="input-group-addon"-->
            <!--style="background-color: #ffffff; border: 0; margin-left: 10px; text-align: left">-->
            <!--<a href="#">策略监控</a>-->
            <!--<i class="glyphicon glyphicon-menu-right"></i>-->
            <!--<span id="menu_name">菜单名称（后期要改)</span>-->
            <!--</span>-->
            <!--</div>-->
            <iframe class="col-sm-10" src="" id="iframe" frameborder="0" height="700px" width="100%"
                    scrolling="auto"></iframe>
        </div>
    </div>
</div>
</body>
</html>